<template>
    <div>
        <p>
            <el-button v-if="localStorage.getItem('icsPath')+''.length > 0" type="text" v-clipboard:copy="icsURL" v-clipboard:success="onCopy"
                       v-clipboard:error="onError">点击复制您的日程URL
            </el-button>
        </p>
        <el-calendar v-model="now">
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                {{ date.getDate() }}
                <div :class="data.isSelected ? 'is-selected' : ''">
                    <p class="task" v-for="(item,index) in thisDayTask(data)" :key="index">
                        {{ item.name }}
                    </p>
                </div>
            </template>
        </el-calendar>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            icsURL: "http://localhost:8080/ics/get/" + localStorage.getItem("icsPath"),
            now: new Date(),
            tasks: [],
        }
    },
    methods: {
        getAllTasks() {
            // 获取当前用户的所有任务
            let token = localStorage.getItem("token");
            this.$axios({
                url: "/api/task/my",
                method: "get",
                headers: {
                    token: token,
                }
            }).then((res) => {
                this.tasks = res.data.result;
                console.log(this.tasks)
            })
        },
        thisDayTask(data) {
            //过滤出今天的所有任务返回一个列表
            let result = [];
            let nowDate = new Date(data.day);
            for (let t in this.tasks) {
                let t_date = new Date(this.tasks[t].beginTime);
                if (nowDate.getFullYear() === t_date.getFullYear() &&
                    nowDate.getMonth() === t_date.getMonth() &&
                    nowDate.getDate() === t_date.getDate()
                ) {
                    result.push(this.tasks[t]);
                }
            }
            return result;
        },
        onCopy: function (e) {
            console.log(e)
            this.$message({
                message: '复制成功',
                type: 'success'
            });
        },
        onError: function (e) {
            console.log('复制失败！'+e)
        },
    },
    created() {
        this.getAllTasks();
    }
}
</script>
<style>
.is-selected {
    color: #1989FA;
}

.task {
    font-size: 15px;
}
</style>